<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>concat-join等方法</title>
</head>
<style>
    body {
        width: 100%;
        height: 100vh;
        background-color: wheat;
        font-size: 30px;
        text-decoration: none;
        font-family: "华文楷体";
        color: gray;
    }

    span {
        color: black;
        font-size: 40px;
        display: block;
        margin-bottom: 10px;
        margin-top: 10px;
    }
</style>
<script>
    // 构造函数
    function Person(name, age, gender) {
        this.name = name
        this.age = age
        this.gender = gender
    }

    // 向构造原型中添加一个system方法用来返回要输出的值
    Person.prototype.system = function () {
        return "我是" + this.name + "性别" + this.gender + "今年" + this.age + "岁"
    }
    // 对象实例化
    let person1 = new Person("张三", 16, "男")
    let person2 = new Person("李四", 18, "女")
    let person3 = new Person("王五", 11, "男")
    let person4 = new Person("龙六", 22, "女")
    let person5 = new Person("啊七", 32, "女")
    let person6 = new Person("小红", 25, "男")
    let person7 = new Person("黑二", 21, "女")

    //concat合并数组
    {
        document.write("<span>concat合并数组：</span>")
        // 将实例化的对象装入数组中
        let arr1 = [person1, person2]

        let arr2 = [person3, person4]

        let arr3 = [person5, person6]

        // 把 arr2 和 arr3 数组以及 person7 对象(也可字符串等)合并到arr1中并赋值给arr数组
        arr = arr1.concat(arr2, arr3, person7)

        // 遍历输出合并后的数组
        arr.forEach(function (value) {
            document.write(value.system())
            document.write("<br>")
        })
    }
    //join将数组转换为字符串 arr.join(value)---需要转换的数组.join(连接方式，默认逗号)
    {
        let arr4 = ["张三", "李四", "王五"]
        let result = arr4.join(" VS ")
        document.write("<span>使用join将object类型转化为String：</span>")
        document.write(result + "---" + typeof result)
    }
    //reverse-反转数组
    {
        document.write("<span>使用reverse-反转数组：</span>")
        let arr5 = [person3, person4, person5]
        arr5.reverse()
        arr5.forEach(function (value) {
            document.write(value.system())
            document.write("<br>")
        })
    }
    //sort--排序
    {
        document.write("<span>sort--排序(直接使用sort方法都是按照Unicode编码排序):</span>")
        let arr = [8, 10, 2, 7, 4, 6, 3]

        //使用函数让它不是Unicode编码排序
        arr.sort(function (a, b) {
            //升序排列
            // if (a > b) {
            //     //大于0换位置
            //     return 1
            // } else if (a < b) {
            //     //小于0不换位置
            //     return -1
            // }else {
            //     //0不换位置
            //     return 0
            // }
            //a-b如何小于0就不换位置，大于0就换位置
            //升序排列 return b - a——降序排列
            return a - b
        })
        arr.forEach(function (value) {
            document.write(value + " ")
        })
        document.write("<span>先使用sort排序在使用reverse反转--逆向排序:</span>")
        arr.reverse()
        arr.forEach(function (value) {
            document.write(value + " ")
        })
    }
</script>
<body>
</body>
</html>